<template>
	<view>
		<view class="header">
			<view class="head">
				<image src="../../static/logo.png" mode="widthFix"></image>
				<view class="self">
					<view class="na">大象沉迷吸食</view>
					<view class="ph">15528369636</view>
				</view>
			</view>
			<view class="th">
				<view class="mo">
					<view class="shu">200</view>
					<view class="tex">用户访问量</view>
				</view>
				<view class="mo">
					<view class="shu">200</view>
					<view class="tex">支付金额</view>
				</view>
				<view class="mo">
					<view class="shu">200</view>
					<view class="tex">支付单数</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="myOrd">
				<view class="">我的订单</view>
				<view class="rig" @click="myOrder">
					<view class="seeMore">查看全部</view>
					<image class="moreImg" src="../../static/more.png" mode=""></image>
				</view>
			</view>
			<view class="opts">
				<view class="optItem">
					<view class="num">65</view>
					<view class="tex">待核销</view>
				</view>
				<view class="optItem">
					<view class="num">65</view>
					<view class="tex">待打窝</view>
				</view>
				<view class="optItem">
					<view class="num">65</view>
					<view class="tex">已完成</view>
				</view>
				<view class="optItem">
					<view class="num">65</view>
					<view class="tex">已取消</view>
				</view>
				
			</view>
		</view>
		<view class="order" style="margin-top: 20rpx;">
			<view class="myOrd">
				<view class="">常用工具</view>
				<!-- <view class="rig">
					<view class="seeMore">查看全部</view>
					<image class="moreImg" src="../../static/more.png" mode=""></image>
				</view> -->
			</view>
			<view class="opts">
				<view class="optItem" @click="scan">
					<!-- <view class="num">65</view> -->
					<image src="../../static/hexiao.png" class="img" mode=""></image>
					<view class="tex">扫码核销</view>
				</view>
				<view class="optItem" @click="goRelease">
					<!-- <view class="num">65</view> -->
					<image src="../../static/myFabu.png" class="img" mode=""></image>
					<view class="tex">我的发布</view>
				</view>
				<view class="optItem" @click="goMoney">
					<!-- <view class="num">65</view> -->
					<image src="../../static/qianbao.png" class="img" mode=""></image>
					<view class="tex">我的钱包</view>
				</view>
				<view class="optItem">
					<!-- <view class="num">65</view> -->
					<image src="../../static/tixian.png" class="img" mode=""></image>
					<view class="tex">提现账号</view>
				</view>
				<view class="optItem" @click="goStore">
					<!-- <view class="num">65</view> -->
					<image src="../../static/shezhi.png" class="img" mode=""></image>
					<view class="tex">店铺设置</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			myOrder(){
				uni.navigateTo({
					url:('/pages/myReservoir/myOrder')
				})
			},
			goRelease(){
				uni.navigateTo({
					url:('/pages/myReservoir/myRelease')
				})
			},
			goMoney(){
				uni.navigateTo({
					url:('/pages/myReservoir/myMoney')
				})
			},
			goStore(){
				uni.navigateTo({
					url:('/pages/myReservoir/storeSet')
				})
			},
			scan(){
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.header{
		border: 1rpx solid transparent;
		padding: 0 27rpx;
		height: 407rpx;
		background: linear-gradient(90deg, #FCF7F7, #F0F3EE, #E3EAF2);
	}
	.head{
		display: flex;
		margin-top: 120rpx;
		image{
			width: 120rpx;
			// height: 120rpx;
			border-radius: 50%;
			margin-right: 26rpx;
		}
		.na{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			margin-top: 15rpx;
		}
		.ph{
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			margin-top: 18rpx;
		}
	}
	.th{
		display: flex;
		justify-content: space-between;
		margin-top: 44rpx;
	}
	.mo{
		width: 200rpx;
		height: 24rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 32rpx;
		text-align: center;
		.tex{
			color: #999999;
			margin-top: 17rpx;
		}
	}
	// 我的订单
	.order{
		margin: 0 27rpx;
		width: 697rpx;
		box-sizing: border-box;
		padding: 25rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.myOrd{
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		font-size: 27rpx;
		color: #333333;
	}
	.rig{
		display: flex;
	}
	.seeMore{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin-right: 12rpx;
	}
	.moreImg{
		width: 10rpx;
		height: 18rpx;
		margin-top: 8rpx;
	}
	.opts{
		margin-top: 43rpx;
		display: grid; 	
		
		grid-template-columns: repeat(4, 1fr); 		
		grid-gap: 46rpx 33rpx
		
	}
	.optItem{
		text-align: center;
	}
	.num{
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.tex{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin-top: 17rpx;
	}
	.img{
		width: 43rpx;
		height: 43rpx;
	}
</style>
